import { Button, Form, Input, Select, Table, Drawer, Tree} from 'antd';
import { SettingOutlined } from '@ant-design/icons'
import React, { useEffect, useState,useRef } from 'react';
import Styles from "./../../assets/styles/shoptype.module.less"
import AddshopType from "../../components/AddshopType.jsx"
import { dictionary,delMsgShop} from '../../apis/service'

import qs from "querystring"

const { Option } = Select;

function TakeService() {

  const [form] = Form.useForm();
  const [, forceUpdate] = useState({});
  const [checkStrictly, setCheckStrictly] = useState(false);
  const [data, setData] = useState([])

  useEffect(() => {
    forceUpdate({});
    fetchData()
  }, [])

  const fetchData = async () => {
    const res = await dictionary()
    console.log(res.data.rows)
    setData(res.data.rows)
  }
  //重置

  //表格
  const columns = [

    {
      title: '名称',
      dataIndex: 'itme',
      key: 'itme',
    },
    {
      title: '操作',
      dataIndex: '',
      key: 'x',
      render: (a) => <a><div onClick={() => update(a)}><SettingOutlined></SettingOutlined></div></a>,
    },
  ];


  //搜索
  const onFinish = async (values) => {
  }
    //修改
    const update = (a) => {
      console.log(a)
      setOpen(true)
      // setTreeDatas(data)
      // setAllData(a)
      form.setFieldsValue(a)
    }
    const onFinishFailed=()=>{}
      //修改模态框开关
  const [open, setOpen] = useState(false);
  //关闭模态框
  const onClose = () => {
    setOpen(false);
  };
  const [id, setID] = useState('')

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      setID(selectedRowKeys.join())

    },
    onSelect: (record, selected, selectedRows) => {
      // console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      // console.log(selected, selectedRows, changeRows);
    },
    
  };
  const delMsg = async () => {
    console.log(id)
    const res = await delMsgShop(id)
    console.log(res)
    // fetchData()
  }

    return (
      <div>

      {/* 新增抽屉 */}
      <div style={{ display: "flex", flexDirection: "row" }}>
        {/* <div><AddshopType treedata={data}></AddshopType></div> */}
        <div style={{ marginLeft: "20px" }}><Button onClick={delMsg}>删除</Button></div>
      </div>
  
  
      <div style={{ marginTop: "20px" }}>
        <Table
          columns={columns}
          rowSelection={{
            ...rowSelection,
            checkStrictly,
          }}
          dataSource={data}
          bordered
          rowKey="id"
          pagination={{
            pageSize: 10,
            pageSizeOptions: [5,10,15],
            showSizeChanger: true,
            showQuickJumper: true
          }}
          size="large"
        />
      </div>

      
      {/* 修改模态框 */}
      <div>
        <Drawer title="修改抽成规则" placement="right" onClose={onClose} open={open}>
          <Form
            form={form}
            name="basic"
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="抽成规则"
              name="itme"
              rules={[
                {
                  required: true,
                  message: '请输入商品类型名称',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              wrapperCol={{
                offset: 15,
                span: 9,
              }}
            >
              <div style={{ display: "flex", flexDirection: "row" }}>
                <Button style={{ marginRight: "10px" }}>取消</Button>
                <Button type="primary" htmlType="submit" style={{ marginRight: "10px" }}>
                  提交
                </Button>
              </div>

            </Form.Item>
          </Form>
        </Drawer>
      </div>
    </div>
    )
}

export default TakeService